<template>
  <wd-popup
    custom-class="cu-modal"
    customStyle="width: '90vw'"
    lock-scroll
    :z-index="999"
    v-model="state.showDia"
    :close-on-click-modal="false"
  >
    <view class="cu-dialog bg-white">
      <!-- <view class="cu-bar flex items-center">
        <view class="action" @tap="hideModal">取消</view>
        <text class="action" style="margin-right: 30rpx; font-size: 30rpx" @tap="makeSure">
					确定
				</text>
      </view> -->
      <view class="content">
        <view
          style="
            box-sizing: border-box;
            display: flex;
            align-items: center;
            width: 100%;
            height: 60rpx;
            padding: 10rpx;
            margin-top: 20rpx;
          "
        >
          <!-- <wd-input v-model="state.queryForm.itemName" clearable @blur="onSearchInput" placeholder="任务名称" /> -->
          <!-- <wd-input
            v-model="state.queryForm.analysisIndex"
            clearable
            @blur="onSearchInput"
            placeholder="分析手段指标"
            style="margin-left: 40rpx"
          /> -->
          <text style="font-size: 16px; color: rgb(0 0 0 / 65%)" @click="hideModal">取消</text>
          <wd-search
            v-model="state.queryForm.analysisIndex"
            @search="onSearchInput"
            style="flex: 1"
            hide-cancel
          ></wd-search>
          <text style="font-size: 16px; color: rgb(0 0 0 / 65%)" @click="submitHandle">确定</text>
        </view>
        <view class="select-tags">
          <view style="width: 100%; white-space: nowrap">
            <wd-tag
              closable
              v-for="(item, index) in selectList"
              round
              type="primary"
              @close="removeItem(item, index)"
            >
              {{ item.analysisIndex }}
            </wd-tag>
          </view>
        </view>
        <scroll-view
          scroll-y
          scroll-x
          class="table-container"
          :refresher-enabled="false"
          @scrolltolower="onScrollLower"
        >
          <view class="search-results">
            <table class="analysis-table flow-details">
              <tbody>
                <tr class="header">
                  <th></th>
                  <th>分析手段指标</th>
                  <th>分析手段名称</th>
                </tr>
                <tr
                  align="center"
                  v-for="(item, index) in state.dataList"
                  :key="index"
                  @tap="makeSure(item)"
                >
                  <td>
                    <wd-icon
                      v-if="item.isCheck"
                      name="check-rectangle-filled"
                      size="18px"
                      color="blue"
                    ></wd-icon>
                    <wd-icon v-else name="rectangle" size="18px" color="#e3e3e3"></wd-icon>
                  </td>
                  <td>{{ item.analysisIndex }}</td>
                  <td>{{ item.analysisName }}</td>
                </tr>
              </tbody>
            </table>
          </view>
        </scroll-view>
      </view>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup name="selectScheme">
import { baseAnalysisIndex } from '@/service/pm-requirement';

const emit = defineEmits(['hideModal', 'checkLeaguer']);

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const state = reactive({
  showDia: false,
  queryForm: {
    analysisIndex: '',
    descs: 'create_time',
  },
  params: {
    current: 1,
    size: 20,
  },
  loadMore: 'finished',
  dataList: [],
});

// watch(
//   () => props.show,
//   (val) => {
//     state.showDia = val;
//     if (val) {
//       onSearchInput();
//     }
//   },
//   { immediate: true, deep: true },
// );
const onSearchInput = (e) => {
  state.dataList = [];
  state.params.current = 1;
  detData();
};

const detData = (e?) => {
  const params = {
    ...state.queryForm,
    ...state.params,
  };
  state.loadMore = 'loading';
  baseAnalysisIndex(params)
    .then((res) => {
      if (state.params.current == 1) state.dataList = [];
      state.dataList = state.dataList.concat(res.data.records);
      state.dataList = state.dataList.map((item) => {
        const o = selectList.value.find(
          (s) => item.analysisIndex == s.analysisIndex && item.indexCode == s.indexCode,
        );
        let isCheck = false;
        if (o) {
          isCheck = true;
        }
        return {
          ...item,
          isCheck,
        };
      });
      if (res.data.records.length < state.params.size) {
        state.loadMore = 'loadEnd';
      } else {
        state.loadMore = 'finished';
      }
    })
    .catch((err) => {});
};

const onScrollLower = (e) => {
  if (e.detail?.direction === 'bottom' && state.loadMore === 'finished') {
    state.params.current++;
    detData();
  }
};

const hideModal = () => {
  emit('hideModal');
  state.showDia = false;
  state.queryForm.analysisIndex = '';
};

const selectList = ref([]);
const makeSure = (item) => {
  // emit('checkLeaguer', {
  //   ...item,
  //   parentIndex: parentIndex.value,
  // });
  // hideModal();
  item['isCheck'] = !item['isCheck'];
  if (item['isCheck']) {
    selectList.value.push(item);
  } else {
    const i = selectList.value.findIndex(
      (s) => item.analysisIndex == s.analysisIndex && item.indexCode == s.indexCode,
    );
    selectList.value.splice(i, 1);
  }
};

const parentIndex = ref(null);
const init = (params) => {
  state.showDia = true;
  parentIndex.value = params.index;
  state.dataList = [];
  state.params.current = 1;
  selectList.value = [];
  detData();
};

const submitHandle = () => {
  if (selectList.value.length == 0) {
    uni.showToast({
      icon: 'none',
      mask: true,
      title: '请选择一条数据',
    });
    return false;
  }

  emit('checkLeaguer', {
    selectList: selectList.value,
    parentIndex: parentIndex.value,
  });
  hideModal();
};

const removeItem = (item, index) => {
  selectList.value.splice(index, 1);

  const i = state.dataList.findIndex(
    (f) => item.analysisIndex == f.analysisIndex && item.indexCode == f.indexCode,
  );
  if (i >= 0) {
    state.dataList[i]['isCheck'] = false;
  }
};

defineExpose({
  init,
});
</script>

<style scoped lang="scss">
@import '/src/pages/pm/experiment/components/table';

.cu-dialog {
  width: 90vw;
  height: 80vh;
  padding: 10rpx 0;
  font-size: 26rpx;

  .cu-bar {
    // padding: 10rpx 20rpx;
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    border-bottom: 1rpx solid #f1f1f1;

    .action {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      min-height: 50px;
      margin-right: 0;
      font-size: 30rpx;
    }
  }

  .content {
    // height: calc(80vh - 220rpx);
    // height: calc(80vh - 140rpx);
    height: calc(80vh - 180rpx);

    .table-container {
      box-sizing: border-box;
      padding: 0 10rpx;
      margin-top: 10rpx;
    }

    .search-results {
      position: relative;

      .flow-details {
        position: relative;
        min-width: 350px;

        .header {
          position: sticky;
          top: 0;
          z-index: 9;
          background-color: #8a929f;
          border-bottom: 1rpx solid #dedede;
          box-shadow: 0 6rpx 28rpx 0 #e0e0e0;
        }

        &.scroll-rigth {
          .sticky-left {
            &::after {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;

              // box-shadow: 6rpx 0 28rpx 0 #e0e0e0;
              z-index: 2;
              width: 1rpx;
              content: '';
              background-color: #dedede;
            }

            // border-right: 1rpx solid #dedede;
          }
        }
      }
    }
  }
}

.select-tags {
  margin-top: 10rpx;
  overflow: auto;
}
</style>
